<template>
  <div class="banxin">
    <ul>
      <li v-for="item in arr" :key="item.id" @click="getDetails(item.id)">
        <section>
        <img :src="'http://sc.wolfcode.cn'+item.coverImg" alt="">
        <div class="sp_title">{{item.name}}</div>
        <div class="jitui">{{item.coin}}积分</div>
        <button class="duihuan_btn">立即兑换</button>
       </section>
      </li>
     
      
    </ul>
  </div>
</template>

<script>

export default {
 props:{
   arr:[]
 },
 methods:{
   getDetails(id){
     this.$router.push(`/details?id=${id}`)
     
   }
 },

}
</script>

<style lang="less" scoped>
@import '../../totao.css';
.banxin{
  
  ul{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    section{
      width: 285px;
    }
    li{
      margin-right: 20px;
      position: relative;
      top: 0;
      width: 285px;
      //每行第四个li没有外边距
      &:nth-of-type(4n){
        margin-right: 0;
      }
      section{
        position: relative;
        top: 0;
        cursor: pointer;
      padding-bottom: 22px;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: white;
     .sp_title{
        font-size: 18px;
        font-weight: normal;
        font-stretch: normal;
        margin-top: 22px;
        text-align: center;
        margin-bottom: 22px;
      }
      .jitui{
        font-size: 18px;
        font-weight: normal;
        font-stretch: normal;
        color: #fd604d;
        text-align: center;
        margin-bottom: 22px;
      }
      .duihuan_btn{
        width: 100px;
        height: 36px;
        margin: auto;
        line-height: 36px;
        text-align: center;
        font-size: 18px;
        font-weight: 300;
        color: #0a328e;
        border: 1px solid #0a328e;
        cursor: pointer;
        background: #fff;
      }
     }
      
      
      
      &:hover{
        section{
         .duihuan_btn{
          background: #0a328e;
          color:white
        }
        top: -20px;
        //0.3秒匀速向上移动 -20px
        transition: top .3s linear; 
        }
        
      }
    }
  }
}
</style>